<template>
    <div v-loading="loading" class="app-container dialog">
        <div class="title">操作系统故障</div>
        <div class="Subhead">基本信息</div>
        <el-form
            :model="form"
            :rules="rules"
            ref="ruleForm"
            label-width="140px"
            class="demo-ruleForm"
        >
            <el-form-item label="标题" prop="title">
                <el-input style="width: 760px" v-model="form.title"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="联系人员" prop="contact_person">
                        <el-input v-model="form.contact_person"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="联系方式" prop="contact_information">
                        <el-input v-model="form.contact_information"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="Subhead">故障信息</div>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="应用系统" prop="appSystem">
                        <el-select clearable filterable v-model="form.appSystem" @change="changeappSystem">
                            <el-option v-for="item in xtList" :key="item.id" :label="item.projectname" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="网络环境" prop="network_environment">
                        <el-select clearable filterable v-model="form.network_environment">
                            <el-option v-for="item in networkList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="IP地址" prop="ip_location">
                        <el-input v-model="form.ip_location"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="操作系统" prop="operating_system">
                        <el-select clearable filterable v-model="form.operating_system">
                            <el-option v-for="item in operatingSystemList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="允许关机时间" prop="allow_shut_down_time">
                        <el-select clearable filterable v-model="form.allow_shut_down_time">
                            <el-option v-for="item in ShutDownList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="故障现象">
                <editor
                    v-model="form.fault_phenomenon"
                    style="
                        min-height: 192px;
                        max-height: 400px;
                        overflow-y: auto;
                    "
                    :min-height="192"
                    :max-height="400"
                />
            </el-form-item>
        </el-form>
        <div class="Subhead">附件
            <el-upload
                style="display: inline-block;"
                class="upload-demo"
                accept
                list-type="picture"
                :show-file-list="false"
                ref="upload"
                :file-list="fileList"
                action=""
                :on-remove="handleChange"
                :on-change="handleChange"
                :auto-upload="false"
            >
            <img style="width: 20px;cursor: pointer;vertical-align: middle;"
                 src="../../../assets/icons/add.png"
                alt="">
            </el-upload>
        </div>
        <el-table
            :data="fileList"
        >
            <el-table-column label="文件名称">
                <template slot-scope="scope">
                    {{
                        scope.row.name.substring(
                            0,
                            scope.row.name.lastIndexOf(".")
                        )
                    }}
                </template>
            </el-table-column>
            <el-table-column label="文件类型">
                <template slot-scope="scope">
                    {{
                        scope.row.name.substring(
                            scope.row.name.lastIndexOf(
                                "."
                            ) + 1,
                            scope.row.name.length
                        )
                    }}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="100"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                  <el-button
                      v-show="['image/jpeg','image/jpg','image/png','image/pdf','image/gif'].indexOf(scope.row.raw.type)>-1"
                      size="mini"
                      type="text"
                      icon="el-icon-view"
                      @click="previewFile(scope.row)"
                      >预览
                  </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="
                            DeleteFile(
                                scope.row,
                                scope.$index
                            )
                        "
                        >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 20px;margin-bottom: 20px;">
            <el-button type="success" @click="sumit">
                提交工单
            </el-button>
        </div>
        <el-dialog :visible.sync="dialogVisible">
            <div style="max-height: 90vh; overflow-y: scroll">
                <img width="100%" :src="dialogImageUrl" alt="" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Editor from "@/components/Editor";
import { AllcloudUpList } from "@/api/cloud/cloud";
import { definition } from "@/api/WorkOrder/OperationMaintenance.js"
import { uploadFile } from "@/api/system/upload.js";
export default {
    name: "systemFailure",
    components: {
        Editor,
    },
    data(){
        return{
            loading:false,
            dialogVisible:false,
            dialogImageUrl: "",
            form:{
                name:''
            },
            cloudSupplier: '',
            appSystem:'',
            //上云系统列表
            xtList: [],
            // 关机时间下拉数组
            ShutDownList:[
                {
                    id:'1',
                    name:'上班时间'
                },
                {
                    id:'2',
                    name:'非上班时间'
                },
                {
                    id:'3',
                    name:'不能关闭'
                },
                {
                    id:'4',
                    name:'其他时间'
                }
            ],
            // 系统状态
            SystemStateList:[
                {
                    id:'1',
                    name:'从系统选择'
                },
                {
                    id:'2',
                    name:'其他'
                }
            ],
            // 操作系统下拉数据
            operatingSystemList:[
                {
                    id:'1',
                    name:'Linux'
                },
                {
                    id:'2',
                    name:'Windows'
                },
            ],
            // 网络环境下拉数据
            networkList:[
                {
                    id:'1',
                    name:'政务外网'
                },
                {
                    id:'2',
                    name:'互联网'
                }
            ],
            fileList:[],
            rules:{
                title:[
                    { required: true, message: '请输入标题', trigger: 'blur' },
                ],
                contact_person:[
                    { required: true, message: '请输入联系人员', trigger: 'blur' },
                ],
                contact_information:[
                    { required: true, message: '请输入联系方式', trigger: 'blur' },
                ],
                appSystem:[
                    { required: true, message: '请输入应用系统', trigger: 'change' },
                ],
                network_environment:[
                    { required: true, message: '请输入网络环境', trigger: 'change' },
                ],
                ip_location:[
                    { required: true, message: '请输入IP地址', trigger: 'blur' },
                ],
                operating_system:[
                    { required: true, message: '请输入操作系统', trigger: 'change' },
                ],
                allow_shut_down_time:[
                    { required: true, message: '请输入允许关机时间', trigger: 'change' },
                ],
            }
        }
    },
    created(){
        this.GetListSelect()
    },
    methods:{
        changeappSystem(val){
            this.xtList.forEach(item=>{
                if(item.id == val){
                    this.cloudSupplier = item.supplierCode
                }
            })
        },
        GetListSelect(){
            AllcloudUpList().then(response => {
                this.xtList = response.rows;
            })
        },
        handleChange(row,fileList){
            this.fileList = fileList;
        },
        previewFile(item){
           this.dialogImageUrl =  item.url;
           this.dialogVisible = true;
        },
        DeleteFile(data, index) {
            this.fileList = this.fileList.filter((item) => {
                if (item.uid == data.uid) {
                } else {
                    return item;
                }
            });
        },
        // 返回上级
        ReturnSuperior(){
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
            this.$destroy(this.$options.name)
            this.$router.go(-1)
        },
        sumit(){
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.loading = true
                    if(this.fileList.length > 0){
                        let Files = new FormData()
                            Files.append("key", "file");
                            this.fileList.forEach((item) => {
                                if(item.raw){
                                    Files.append("file", item.raw);
                                }
                            });
                        uploadFile(Files).then(response=>{
                            this.fileList = []
                            let obj = {
                                formData: this.form,
                                variables:{
                                    cloudSupplier: this.cloudSupplier.toLowerCase() + '_cloud_provider',
							deptId: sessionStorage.getItem("deptId"),//当前登录人部门
							deptScope: "UP_CASCADE",//部门范围，向上级联
                                },
                                formDefKey:'operatingSystemFailure',
                                title:this.form.title,
                                files:response.data
                            }
                            definition("yunwei_os", obj).then(res=>{
                                if(res.code == 200){
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    })
                                    this.form = {}
                                    this.ReturnSuperior()
                                }
                            }).catch(err=>{
                                this.loading = false
                            })
                        }).catch(err=>{
                            this.loading = false
                        })
                    }else{
                        let obj = {
                            formData: this.form,
                            variables:{
                                cloudSupplier: this.cloudSupplier.toLowerCase() + '_cloud_provider',
							deptId: sessionStorage.getItem("deptId"),//当前登录人部门
							deptScope: "UP_CASCADE",//部门范围，向上级联
                            },
                            formDefKey:'operatingSystemFailure',
                            title:this.form.title,
                        }
                        definition("yunwei_os", obj).then(res=>{
                            if(res.code == 200){
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                })
                                this.form = {}
                                this.ReturnSuperior()
                                this.loading = false
                            }
                        })
                        .catch(err=>{
                            this.loading = false
                        })
                    }
                } else {
                    return false;
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.dialog {
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .Subhead {
        text-align: left;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 2px solid #38b3aa;
    }
    .tabletitle{
        width: 100%;
        text-align: center;
        font-weight: bold;
        border: 1px solid rgb(248,248,249);
        height: 40px;
        line-height: 40px;
        border-bottom: none;
    }
}
</style>
